﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改地址</title>
<link rel="stylesheet" type="text/css" href="../css/addRole.css" />
<style type="text/css">
	.btn{
		width:356px;
		height: 52px;
		background-color: #F9C486;
		font-size: 32px;
		font-weight: 500;
		color: #333333;
		line-height: 52px;
		text-align: center;
		margin-left:197px;
		margin-top: 50px;
	}
	.form{
		position: absolute;
		left: 100px;
		top:200px;
	}
	input{
		width: auto;
		font-size: 32px;
	}
	.box{
		line-height: 100px;
		font-size: 40px;
		width: 685px;
		font-weight: 300;
		color: #FFFFFF;
		height: 84px;
		border-bottom: 1px solid #cdcdcd;
	}
</style>

</head>
<body>
<div id="app" class="form">
	<div class="box">
		<label>收货地址</label>
		<input type="text" id="address" v-model="this.address.address" placeholder="">
	</div>
	<div class="box">
		<label>收货人姓名</label>
		<input type="text" id="name" v-model="this.address.name" placeholder="">
	</div>
	<div class="box">
		<label>收货电话</label>
		<input type="text" id="phone" v-model="this.address.phone"  placeholder="">
	</div>
	<div class="btn" @click="submit" >提　　交</div>
</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/request.js"></script>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			id:'',
			type:'',//update 或 add  判断新增或修改
			goodsId:'',
			address: {
				id: '',
				address:'',
				name:'',
				phone:'',
			},
		},
		methods:{
			getAddress(){
				var _this = this;
				ajaxPost("../addressController/getById",{"id":_this.id}, function (result) {
					_this.address = result;
				});
			},
			submit(){
				var name = document.getElementById("name");
				if(name.value==''){
					alert('姓名不能为空');
					name.focus();
					return false;
				}else{
					this.address.name = name.value;
				}
				var phone = document.getElementById('phone');
				if(phone.value==''){
					alert('电话不能为空');
					phone.focus();
					return false;
				}else{
					var phone_reg = /^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}|17[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}/;
					var tel_reg = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
					if(!phone_reg.test(phone.value) && !tel_reg.test(phone.value)){
						alert('手机或电话号码格式不正确。如果是固定电话，必须形如(xxxx-xxxxxxxx)');
						phone.focus();
						return false;
					}else{
						this.address.phone = phone.value;
					}
				}
				var addres = document.getElementById('address');
				if(addres.value==''){
					alert('地址不能为空');
					addres.focus();
					return false;
				}else{
					if(addres.value.length<8){
						alert('不能少于8个字');
						addres.focus();
						return false;
					}else{
						this.address.address = addres.value;
					}
				}
				var _this = this;
				ajaxJsonPost("../addressController/save",_this.address, function (result) {
					window.location.href="../html/address.html?goodsId="+_this.goodsId;
				});
			},
			getUrlKey(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
			}
		},
		created() {
			//获取地址栏参数
			this.id = this.getUrlKey('id')
			this.type = this.getUrlKey('type')
			this.goodsId = this.getUrlKey('goodsId')
		},
		mounted(){
			if(this.type == "update"){
				this.getAddress();
			}
			console.log("挂载完成生命周期");
		},
	})
</script>